<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-item">
        <span class="span">登录状态 </span>
        <el-select v-model="listQuery.status" placeholder="请选择登录状态" style="width: 200px">
          <el-option label="全部状态" value="" />
          <el-option v-for="item in dictList('login_status')" :key="item.label + 'loginstatus'" :label="item.label" :value="item.value" />
        </el-select>
      </div>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
      <!-- <el-button plain :loading="batchDeleteLoading" class="filter-item" type="danger" icon="el-icon-delete" @click="handleBatchDelete">删除</el-button> -->
      <el-button v-waves class="filter-item" icon="el-icon-refresh" @click="handleRest">{{ $t('table.rest') }}</el-button>
    </div>

    <el-table
      ref="multipleTable"
      max-height="700"
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在加载，请稍后"
      border
      fit
      highlight-current-row
      tyle="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column label="序号" align="center" type="index" width="100" />
      <el-table-column width="120" align="center" label="登录用户">
        <template #default="scope">
          <span>{{ scope.row.loginName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150" align="center" label="登录IP">
        <template #default="scope">
          <span>{{ scope.row.loginIp }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="150" align="center" label="浏览器">
        <template #default="scope">
          <span>{{ scope.row.browser }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150" align="center" label="操作系统">
        <template #default="scope">
          <span>{{ scope.row.os }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150" align="center" label="登录状态">
        <template #default="scope">
          <el-tag :type="scope.row.status | statusTypeFilter">{{ scope.row.status | dictLabel('login_status') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column min-width="200" align="center" label="操作信息">
        <template #default="scope">
          <span>{{ scope.row.msg }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="220" align="center" fixed="right" label="操作时间">
        <template #default="scope">
          <span>{{ scope.row.loginTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page.sync="listQuery.page"
        :page-sizes="pageArray"
        :page-size="listQuery.limit"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { fetchLoginLogList, deleteLoginLog, batchDeleteLoginLog, exportLoginLog } from '@/api/monitor/log/login'
import waves from '@/directive/waves' // 水波纹指令
import dayjs from 'dayjs'

export default {
  name: 'ScheduleJobLogList',
  directives: {
    waves,
  },
  filters: {
    statusTypeFilter(status) {
      const statusMap = {
        '-1': 'danger',
        0: 'info',
        1: 'success',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      pageArray: this.$store.getters.pageArray,
      listQuery: {
        page: 1,
        limit: this.$store.getters.defaultPageSize,
        importance: undefined,
        title: undefined,
        type: undefined,
      },
      showReviewer: false,
      dialogFormVisible: false,
      multipleSelection: [],
      batchDeleteLoading: false,
      downloadLoading: false,
      statusOptions: [
        { label: '发送失败', value: '-1' },
        { label: '发送中', value: '0' },
        { label: '发送成功', value: '1' },
      ],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchLoginLogList(this.listQuery).then((response) => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success',
      })
      row.status = status
    },
    handleDelete(row) {
      deleteLoginLog(row.id).then(() => {
        this.$message.success('删除成功')
        const index = this.list.indexOf(row)
        this.list.splice(index, 1)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleDownload() {
      this.downloadLoading = false
      console.log(this.listQuery)

      this.download('/system/monitor/login/log/export', this.listQuery, 'get', `登录日志 ${dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}.xlsx`)

      // exportLoginLog(this.listQuery).then((response) => {
      //   this.downloadLoading = true
      //   if (response.data.code === 0) {
      //     import('@/vendor/Export2Excel').then((excel) => {
      //       excel.export_byte_to_excel(response.data.data.bytes, response.data.data.title)
      //       this.downloadLoading = false
      //     })
      //   } else {
      //     this.$message.error(response.data.errmsg)
      //   }
      // })
    },
    //重置
    handleRest() {
      this.listQuery = {
        page: 1,
        limit: this.$store.getters.defaultPageSize,
      }
      this.getList()
    },
    handleBatchDelete() {
      if (this.multipleSelection.length) {
        this.batchDeleteLoading = true
        const list = this.multipleSelection
        var ids = []
        list.forEach(function (value, index, array) {
          ids.push(value.id)
        })
        var idsStr = ids.join(',')
        batchDeleteLoginLog(idsStr)
          .then((res) => {
            this.$message.success(res.data.msg)
            this.$refs.multipleTable.clearSelection()
            this.batchDeleteLoading = false
            this.getList()
          })
          .catch(() => {
            this.batchDeleteLoading = false
          })
      } else {
        this.$message({
          message: '至少选择一条日志',
          type: 'warning',
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep(::-webkit-scrollbar) {
  display: block !important;
}
.span {
  color: #606266;
  font-weight: 700;
  font-size: 14px;
}
</style>
